<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./js/vue.js"></script>
    <link rel="stylesheet" href="./highlight/styles/agate.css"> 
    <script src="./highlight/highlight.pack.js"></script> 
    <script > hljs.initHighlightingOnLoad();</script>
    <script src="./js/my-pre.js"></script>
</head>
<body>
    <div id="app">
       <h1>slot-在子组件中使用slot就可以为这个子组件开启一个slot,在父组件模板里,插入在子组件标签内的所有内容将替代子组件的slot标签及它的内容.</h1>
       <child-a>
           <p>分发的内容</p> 
       </child-a>
    </div>
    
    <script>
        Vue.component('child-a',{
            template:'\
            <div>\
                <slot>\
                    <p>如果父组件没有插入内容,我将作为默认出现</p>\
                    </slot>\
                    <div>'
        })

        new Vue({
            el: '#app',
            data: {
                message:''
            }
        })
    </script>
    
</body>
</html>